<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  #app {

    margin: 0 auto;
    width: 1200px;
    display: flex;
    flex-direction: row;

  }

  body {
    margin: 0px;
    background-color: rgba(50, 50, 50, 0.9);
    color: white;
  }


  .left {
    width: 75%;
    height: 950px;

  }

  .right {
    margin-left: 50px;
    width: 25%;
    height: 200px;
    border: 1px solid white;
  }

  .first {
    width: 100%;
    height: 170px;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
  }

  .second {
    width: 100%;
    height: 140px;
    border: 1px solid white;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
  }

  .name {
    font-size: 26px;
    margin-top: 50px;
    margin-left: 20px;
  }

  .money {
    color: red;
    font-size: 32px;
    margin-top: 50px;
    margin-left: 300px;
  }

  .counter {
    margin-top: 50px;
    margin-left: 20px;
  }

  .third {
    width: 100%;
    border: 1px solid white;
    margin-top: 10px;
  }

  .outInfor {
    width: 100%;
    height: 50px;

  }

  .outInfor1 {
    font-weight: bolder;
    font-size: 18px;
    padding-top: 10px;
    margin-left: 20px;
  }

  .littleTitle {
    font-size: 16px;
    margin-left: 20px;
    margin-top: 10px;
  }

  .four {
    width: 100%;
    border: 1px solid white;
    margin-top: 10px;
  }

  .five {
    width: 100%;
    height: 80px;
    margin-top: 10px;
  }

  .totalPay {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
  }

  .totalPay1 {
    font-weight: bolder;
    font-size: 18px;
    padding-top: 40px;
    margin-left: 20px;
  }

  .totalPay2 {
    padding-top: 40px;
    margin-left: 150px;
  }

  .title {
    font-size: 30px;
    font-weight: bolder;
    margin-left: 20px;
    margin-top: 20px;
  }

  .date {
    font-size: 16px;
    margin-left: 20px;
    margin-top: 55px;
  }

  .dateChoose {
    display: flex;
    flex-direction: row;
  }

  el-button {
    margin-right: 10px;
  }

  .dateDetail {
    margin-left: 50px;
    margin-top: 40px;
  }

  .block {
    margin-left: 30px;
  }

  .gotopay {
    width: 100%;
    height: 50px;
    background-color: orange;
    color: white;
  }

  .one {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 10px;
  }

  .name1 {
    font-size: 14px;
  }

  .money1 {
    font-size: 14px;
    color: orange;
    margin-left: 40px;
  }

  .two {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 10px;
  }

  .name2 {
    font-size: 14px;
  }

  .money2 {
    font-size: 14px;
    color: orange;
    margin-left: 70px;
  }

  .sitestyle {
    width: 30px;
    height: 30px;
    background-color: white;
    float: left;
    margin: 2px;
  }

  .sitestyle:hover {
    cursor: pointer;
    -moz-box-shadow: 0 2px 40px -24px white;
    box-shadow: 0 2px 40px -24px white;
    background-color: rgba(0, 0, 0, 0.1);
    transition: 0.3s;
  }

  .sitestylesle {
    -moz-box-shadow: 0 2px 40px -24px white;
    box-shadow: 0 2px 40px -24px white;
    background-color: rgba(0, 0, 0, 0.1);
  }
</style>

<body>
  <div id="app">
    <div class="left">
      <div class="first">
        <span class="title">{{movieinfo.name}}</span>
        <div class="dateChoose">
          <span class="date">使用日期</span>
          <div class="dateDetail">

            <el-button>今天 {{movieinfo.price}} RMB</el-button>
            <el-button>明天 {{movieinfo.price}} RMB</el-button>
            <el-button>后天 {{movieinfo.price}} RMB</el-button>

            <el-date-picker v-model="value" align="right" type="date" class="block" placeholder="选择其他日期"
              :picker-options="pickerOptions">
            </el-date-picker>

          </div>
        </div>
      </div>
      <div class="second">
        <div class="name">成人票 </div>
        <div class="money">￥{{movieinfo.price * count}}</div>
        <el-input-number class="counter" v-model="count1" @change="handleChange" :min="1" :max="100" label="描述文字">
        </el-input-number>
      </div>
      <div class="third">
        <div class="outInfor">
          <div class="outInfor1">购票人信息</div>
        </div>
        <div class="littleTitle">购票人</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="buyerPhone">
            <el-input minlength="11" maxlength="11" v-model="ruleForm.buyerPhone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="terify">
            <el-input minlength="18" maxlength="18" v-model="ruleForm.terify"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="four">
        <div class="outInfor">
          <div class="outInfor1">联系信息</div>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="third">
        <div class="outInfor">
          <div class="outInfor1">影院选择</div>
        </div>
        <div class="littleTitle">影院选择</div>

        <el-form :model="ruleForm"  ref="ruleForm" label-width="100px">
          <el-form-item prop="address" v-for="(item, index) in placelist" :key="index">
            <el-button @click="setplace(item)">{{item.name}}</el-button>
          </el-form-item>
        </el-form>

      </div>
      <div class="four">
        <div class="outInfor">
          <div class="outInfor1">选座</div>
        </div>
        <el-form label-width="80px">
          <el-form-item v-for="(item, index) in rows" :key="index">
            <span style="float: left;"> 第{{index+1}}排: </span>
            <div v-for="(item, index2) in siteinrows" :key="index2"
              :class="{'sitestylesle': selectsiteArray.indexOf({'rowsele':index,'sitesele':index2}) > 0 }"
              class="sitestyle" @click="goselect(index,index2)"></div>
          </el-form-item>
        </el-form>
      </div>
      <div class="five">
        <el-button class="gotopay" @click="gopay('ruleForm')">去支付</el-button>
      </div>
    </div>
    <div class="right">
      <div class="totalPay">
        <div class="totalPay1">订单总额</div>
        <div class="totalPay2">￥0</div>
      </div>
      <div class="one">
        <div class="name1">{{movieinfo.name}}</div>
        <div class="money1">￥{{movieinfo.price * count}}</div>
      </div>
    </div>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      var checkPhone = (rule, value, callback) => {
        const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
        if (!value) {
          return callback(new Error('电话号码不能为空'))
        }
        setTimeout(() => {
          // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
          // 所以在前面加了一个+实现隐式转换

          if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error('电话号码格式不正确'))
            }
          }
        }, 100)
      };

      var checkEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        if (!value) {
          return callback(new Error('邮箱不能为空'))
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      };
      return {
        movieinfo: {},
        rows: 0,
        siteinrows: 0,
        selectsiteArray: [{ rowsele: undefined, sitesele: undefined }],
        rowsele: undefined,
        sitesele: undefined,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value: '',
        count: 1,
        count1: 0,
        ruleForm: {
          name: '',
          buyerPhone: '',
          terify: '',
          address: ""
        },

        rules: {
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 8个字符', trigger: 'blur' }
          ],
          realname: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 2到  3个字符', trigger: 'blur' }
          ],
          buyerPhone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' }
          ],
          terify: [
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { min: 18, max: 18, message: '长度在18个字符', trigger: 'blur' }
          ],
          buyerEmail: [
            { validator: checkEmail, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
          ],
        },
        placelist: []
      }

    },
    mounted() {
      this.getPlace();
      this.getMovieInfo();

    },
    computed: {
      isselect() {
        return function (value) {
          console.log(value)
          return false
          // return this.methodGetByteLen(value, 20)
        }
      }
    },
    methods: {


      gopay(ruleForm) {
        this.$refs[ruleForm].validate((ispass) => {
          if (ispass == true) {
            var userbase = JSON.parse(localStorage.getItem("userbase"));
            axios.post("/usermovie/addUserMovie", { uid: userbase.id, mid: this.movieinfo.id }).then(res => {
              console.log(res);
              var a = confirm('确定要支付吗')
              if (a == true) {
                window.location.href = "/qrcode.jsp?id=" + this.movieinfo.id + "&count=" + this.count + "&phone=" + this.ruleForm.buyerPhone +"&address=" + this.ruleForm.address;
              }
            })
          } else {
            this.$notify.error({
              title: '表单错误',
              message: '表单错误！'
            })
          }
        })
      },
      createbill() {
        axios.post("/usermovie/addUserMovie", { uid: userbase.id, mid: this.movieinfo.id }).then(res => {
          console.log(res);
          window.location.href = "/qrcode.jsp?id=" + this.movieinfo.id;
        })
      },
      setplace(item) {
        this.rows = item.siterows;
        this.siteinrows = item.sitecol;
      },
      GetQueryValue(queryName) {
        var query = decodeURI(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == queryName) { return pair[1]; }
        }
        return null;
      },
      handleChange(value) {
        // for(int)

        console.log(value)
        if (value > this.count) {
          var site = { rowsele: undefined, sitesele: undefined }
          this.selectsiteArray.push(site);
        } else {
          this.selectsiteArray.splice(0, 1)
        }
        this.count = value

        console.log(this.selectsiteArray);
      },
      getPlace() {
        axios.post("/place/getAllPlace", {}).then(res => {
          this.placelist = res.data.data;
          console.log(res)
        })
      },
      getMovieInfo() {
        var parmid = this.GetQueryValue('id');
        axios.post("/movie/getMovie", { id: parmid }).then(res => {
          console.log(res)
          this.movieinfo = res.data.data;

        })
      },

      goselect(index1, index2) {

        this.rowsele = index1;
        this.sitesele = index2;
        console.log(this.rowsele);
        console.log(this.sitesele);

        this.selectsiteArray.forEach(element => {
          if (element.rowsele != index1 && element.sitesele != index2) { element.rowsele = index1; element.sitesele = index2 }
        });
        console.log(this.selectsiteArray)
      }
    }
  })

</script>

</html>